<template>
  <!-- 金融产品申报编辑页 -->
  <div class="layout">
    <ContainerTitle text="金融产品申报编辑页"></ContainerTitle>
    <div class="b-wrap">
      <div class="b-title">中国银行提供流动资金贷款业务</div>
      <div class="tip">申报审核状态：<span>审核未通过</span></div>
    </div>
    <div class="tableDiv">
      <div class="rowDiv">
        <div class="keyDiv">贷款银行</div>
        <div class="valueDiv">中国银行</div>
        <div class="keyDiv">责任部门</div>
        <div class="valueDiv">石家庄市裕华区经济和信息化局</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">贷款对象</div>
        <div class="valueDiv">仅限工业类企业</div>
        <div class="keyDiv">贷款金额</div>
        <div class="valueDiv">100万</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">发文部门</div>
        <div class="valueDiv">金融办</div>
        <div class="keyDiv">发文时间</div>
        <div class="valueDiv">2021-06-1 10:00:23</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">申报期限</div>
        <div class="valueDiv">2021-06-01至2021-08-01</div>
        <div class="keyDiv">还款方式种类</div>
        <div class="valueDiv">先息后本</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">年息范围</div>
        <div class="valueDiv">2%-3%</div>
        <div class="keyDiv">贷款期限</div>
        <div class="valueDiv">36个月</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">产品背景</div>
        <div class="valueDiv">
          中国银行为利好裕华区农业发展而推出的金融贷款
        </div>
        <div class="keyDiv">浏览量</div>
        <div class="valueDiv">1.09万</div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">申请所需材料</div>
        <div class="valueDivFull">
          企业营业执照：法人身份证;中国人民银行发放的贷款卡；公司法人公章；
        </div>
      </div>
    </div>
    <el-form
      ref="form"
      :model="detail"
      label-width="120px"
      style="text-align: left; margin-top: 40px"
    >
      <el-form-item label="审核时间：">
        <span>2021-06-1 10:00:23</span>
      </el-form-item>
      <el-form-item label="申请理由：" :rules="[{ required: true }]">
        <el-input
          placeholder="请输入"
          type="textarea"
          resize="none"
          :maxlength="300"
          :autosize="{ minRows: 4, maxRows: 4 }"
          v-model.trim="detail.reason"
          :show-word-limit="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="上传申请资料：" :rules="[{ required: true }]">
        <div class="material" v-for="(file, index) in [1, 2]" :key="index">
          <span>申请条件.rar</span>
          <span>重新上传</span>
        </div>
      </el-form-item>
    </el-form>
    <div class="btn-bottom">
      <div class="cancelBtn" @click="goBack()">取消</div>
      <div class="sendBtn">申请</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "finance",
      crumbs: [
        {
          label: "企业空间",
          value: "company",
        },
        {
          label: "金融服务",
          value: "",
        },
        {
          label: "我申报的金融产品",
          value: "myDeclareFinanceProduct",
        },
        {
          label: "金融产品申报编辑页",
          value: "myDeclareFinanceProductEdit",
          choose: true,
        },
      ],
      detail: {},
    };
  },
  methods: {
    /**
     * 返回上一页
     */
    goBack: function () {
      this.$router.back();
    },
  },
};
</script>
<style scoped>
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}
.backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}
.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}
.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
}
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.b-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.b-wrap .b-title {
  color: #333;
  font-weight: bold;
  font-size: 24px;
  text-align: left;
}
.b-wrap .tip {
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
}
.b-wrap .tip span {
  color: rgba(208, 0, 0, 1);
}

.tableDiv {
  font-size: 15px;
  border: 1px solid #eeeeee;
  color: #666666;
}

.tableDiv .rowDiv {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #eeeeee;
}

.tableDiv .rowDiv:last-of-type {
  border-bottom: none;
}

.tableDiv .rowDiv .keyDiv {
  flex-shrink: 0;
  padding: 10px;
  background-color: #f4f4f4;
  color: #333;
  font-size: 14px;
  width: 90px;
  text-align: right;
}

.tableDiv .rowDiv .valueDiv {
  padding: 10px;
  width: 40%;
  font-size: 14px;
  text-align: left;
}

.tableDiv .rowDiv .valueDivFull {
  padding: 10px;
  /* width: 40%; */
  text-align: center;
}

.tableDiv .rowDiv .valueDiv img:hover {
  cursor: pointer;
}
.btn-bottom {
  text-align: center;
  margin: 40px 0 150px;
}
.btn-bottom .cancelBtn {
  border: 1px solid #eeeeee;
  display: inline-block;
  font-size: 14px;
  padding: 10px 46px;
  text-align: center;
  border-radius: 5px;
  margin-right: 10px;
}
.btn-bottom .cancelBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}
.btn-bottom .sendBtn {
  padding: 10px 46px;
  background-color: #045db9;
  display: inline-block;
  color: #ffffff;
  border-radius: 5px;
  transition: all 0.2s ease 0s;
  margin-right: 10px;
}
.btn-bottom .sendBtn:hover {
  box-shadow: 0px 5px 5px #e1e1e1;
  cursor: pointer;
}
.material {
  display: flex;
  align-items: center;
}
.material span:first-of-type {
  margin-right: 10px;
}
.material span:last-of-type {
  color: #045db9;
  cursor: pointer;
}
</style>